<template>
    <div class="map-demo">
        <div class="map-controls">
            <button v-for="source in mapSources" :key="source.id" @click="switchMapSource(source)"
                :class="{ active: currentSource === source.id }">
                {{ source.name }}
            </button>
        </div>
        <div id="map1" class="map-container"></div>
    </div>
</template>

<script>
import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'

export default {
    name: 'map1',
    data() {
        return {
            map: null,
            currentSource: 'gaode',
            mapSources: [
                {
                    id: 'gaode',
                    name: '高德地图',
                    url: 'https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
                    // attribution: '© 高德地图'
                },
                {
                    id: 'arcgis',
                    name: 'ArcGIS街道',
                    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
                    // attribution: 'Tiles © Esri'
                },
                {
                    id: 'satellite',
                    name: '卫星影像',
                    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                    // attribution: 'Tiles © Esri'
                },
            ]
        }
    },
    mounted() {
        this.initMap()
    },
    methods: {
        initMap() {
            const initialSource = this.mapSources.find(s => s.id === this.currentSource)

            this.map = new Map({
                target: 'map1',
                layers: [
                    new TileLayer({
                        source: new XYZ(initialSource)
                    })
                ],
                view: new View({
                    center: [116.3974, 39.9093], // 北京
                    zoom: 10
                })
            })
        },

        switchMapSource(source) {
            if (this.currentSource !== source.id) {
                const newSource = new XYZ(source)
                this.map.getLayers().item(0).setSource(newSource)
                this.currentSource = source.id
            }
        }
    },
    beforeUnmount() {
        if (this.map) {
            this.map.setTarget(null)
        }
    }
}
</script>

<style scoped>
.map-demo {
    width: 100%;
    height: 100%;

}

.map-controls {
    display: flex;
}

.map-controls button {
    display: block;
    margin: 5px 0;
    padding: 8px 12px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    width: 120px;
}

.map-controls button:hover {
    background: #e9e9e9;
}

.map-controls button.active {
    background: #1890ff;
    color: white;
    border-color: #1890ff;
}

.map-container {
    width: 100%;
    height: calc(100% - 30px);
}
</style>